import React, { Component } from 'react';
import { Popup, NavBar } from 'antd-mobile'
import actions from '../../store/actions'
import { connect } from 'react-redux'
class Index extends Component {
  state = {
    visible: false
  }
  handleCollect(v) {
    // 加入收藏
    this.props.dispatch(actions.setCollect(v))
  }
  handleAddCar(v) {
    // 加入购物车
    this.props.dispatch(actions.addCarList(v))
  }
  render() {
    const { location } = this.props
    const { state } = location
    const { visible } = this.state
    return (
      <div>
         <NavBar onBack={() => this.props.history.goBack()}>标题</NavBar>
        <dl>
          <dt>
            <img src={ state.url } alt="" />
          </dt>
          <dd>
            <h3>{ state.title }</h3>
            <p>{ state.desc }</p>
            <p>{state.price}</p>
          </dd>
        </dl>

        <div>
          <button onClick={ () => this.setState({ visible: true })}>优惠卷</button>
        </div>
        <div>
          <button onClick={ () => this.handleCollect(state) }>{ state.isCollect ? '已加入': '收藏' }</button>
          <button onClick={ () => this.handleAddCar(state) }>加入购物车</button>
        </div>

        {/* 底部优惠卷数据 */}
        <Popup
          visible={visible}
          onMaskClick={() => {
            this.setState({
              visible: false
            })
          }}
          bodyStyle={{ minHeight: '40vh' }}
        >
          <ul>
            {
              state.discount && state.discount.length > 0 && state.discount.map((v, i) => {
                return (
                  <li key={i}>
                  <p>{v.title}</p>
                  <p>{v.content}</p>
                  </li>
                )
              })
            }
          </ul>
        </Popup>
      </div>
    );
  }
}

const mapState = state => state
const mapDiaptch = dispatch => ({ dispatch })

export default connect(mapState,mapDiaptch)(Index);

